<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery_动画</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			div{
				width:200px;
				height:200px;
				margin:50px;
				background-color:pink;
				border:2px solid blue;
			}
			button{
				width:60px;
				height:30px;
				text-align:center;
				line-height:30px;
				border:1px solid black;
				margin-left:30px;
				background-color:cadetblue;
				cursor:pointer;
			}
			button:hover{
				background-color:red;
				color:white;
			}
		</style>
		<script type = "text/javascript" src = "jquery-3.4.1.js"></script>
	</head>
	<body>
		
		<div></div>
		<button>显示</button>
		<button>隐藏</button>
		<button>停止动画</button>
		<script>
			/* jQuery动画:
			$(selector).hide(speed,callback);
			$(selector).show(speed,callback);
			可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
			可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
			
			   -->show/hide
			   show()显示的元素
			   hide()隐藏的元素
			   toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素：
				
			   -->fadeIn/fadeOut,（褪色-->透明度变化）
			    fadeIn() 用于淡入已隐藏的元素。
			    fadeOut() 方法用于淡出可见元素。
				fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
				fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
				$(selector).fadeTo(speed,opacity,callback);
			   
			   -->slideUp/slideDown, (拉窗帘式的收起和放下，垂直方向上)
			   slideDown() 方法用于向下滑动元素。
			   slideUp() 方法用于向上滑动元素。
			   slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
			   
			   -->animate
			   animate() 方法用于创建自定义动画。
			   $(selector).animate({params},speed,callback);
			   
			   -->stop(stop-->停止当前运动的动画,//有参数true的时候，停止所有动画)
			   $(selector).stop(stopAll,goToEnd);
			   可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
			   可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false
			   因此，默认地，stop() 会清除在被选元素上指定的当前动画。
			   
			   -->Callback 函数在当前动画 100% 完成之后执行。
			   $(selector).hide(speed,callback)
			   
			   -->Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。通过 jQuery，您可以把动作/方法链接起来。
			   $("#p1").css("color","red").slideUp(2000).slideDown(2000);

			*/
		   $("button:eq(0)").click(function(){
			  //$("div").show(3000); //固定时间进行show
			  //$("div").fadeIn(2000);
			  //$("div").slideDown(2000);
			  
			  //同步变化
			 /* $("div").animate({
				  width:500,
				  height:500,
			  }); */
			  
			  //异步变化
			  $("div").animate({
			  	  width:500,
			  },5000).animate({
				  height:500,
			  },5000);
			  
		   })
		   
		   $("button:first").click(function(){
			    //$("div").hide(2000);//固定时间进行hide
				//$("div").fadeOut(2000);
				//$("div").slideUp(2000);
				//同步变化
				/* $("div").animate({
								  width:200,
								  height:200,
				 }); */
				 
				 //异步变化
				 $("div").animate({
				 	  height:200,
				 },5000).animate({
					  width:200,
				 },5000);
		   })
		  
		  $("button:last").click(function(){
			  //$("div").stop();停止动画序列中当前运行的一个
			  $("div").stop(true);//有参数true的时候，停止所有动画
		  })
		</script>
	</body>
</html>
